<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1','2', '3']" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>终端配置</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="/map">终端地图</el-menu-item>
            <el-menu-item index="/home">摄像头配置</el-menu-item>
          </el-menu-item-group>
          <el-menu-item index="delcam">删除终端</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
          <el-menu-item index="list">摄像头数据</el-menu-item>
          <!-- <el-menu-item index="/statistic_chart">统计图表</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>视频查看</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="liveview">实时浏览</el-menu-item>
            <el-menu-item index="review">录像视频</el-menu-item>
            <el-menu-item index="live">多路播放</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="safe_quit">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{person_name}}</span>
      </el-header>
      <el-main>
        <el-table :data="tableData" stripe style="width: 1000px">
          <el-table-column prop="label" label="终端号" width="180">
          </el-table-column>
          <el-table-column prop="devId" label="设备ID" width="360">
          </el-table-column>
          <el-table-column prop="channelNo" label="通道ID" width="360">
          </el-table-column>
          <el-table-column prop="channel" label="通道号" min-width="100">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="text-align: center; font-size: 10px">
        版权所有 © 雷佳千
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>

  export default {
    name: "list",
    editableTabsValue: "2",
    data() {
      return {
        tableData: [] //数据库中终端信息存储
      }
    },
    methods: {

    },
    beforeCreate() {
      this.$http.get(this.$site + 'api/see_config')
        .then((response) => {
          response = response.body;
          for (var i = 0; i < response.length; i++) {
            var demo = {
              "label": "终端" + response[i].terminal,
              "devId": response[i].devId,
              "channelNo": response[i].channelNo,
              "channel": response[i].channel
            };
            this.tableData.push(demo)
          }
        });
    },
    mounted() {
      console.log("liveview渲染完");
      var person_name = sessionStorage.getItem('person_name');
      if (person_name === null) {
        this.$router.push('/')
      } else {
        this.person_name = person_name
      };
      this.editableTabsValue = this.terminal_id_dev.length
    }
  }

</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .el-table {
    margin-left: 80px;
  }

</style>
